<script lang="ts">
export default {
  name: 'categoryForm'
}
</script>

<script setup lang="ts">
import {reactive, onMounted, onBeforeUnmount, watch, computed} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {useTabsStore} from "@/store/modules/tabs";
import {Tab} from "@/store/modules/tabs/type.ts";

// 获取选项卡仓库
let tabsStore = useTabsStore(); // 使用 Pinia 获取选项卡仓库
const route = useRoute()
const router = useRouter()

// 计算属性：选项卡数据
const tabsList = computed(() => tabsStore.tabList) // 从仓库获取选项卡列表


// 表单数据
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})


// 获取当前操作类型
const getOperationType = () => {
  return route.params.type as 'create' | 'edit' | 'view'
}

// 获取表单标题
const getTitle = () => {
  const type = getOperationType()
  switch (type) {
    case 'create':
      return '创建表单'
    case 'edit':
      return '编辑表单'
    case 'view':
      return '查看表单'
    default:
      return '表单'
  }

  // 修改tab标题
  const {path, meta} = route; // 获取当前路由的路径和元信息
  console.log(path) // 打印当前路由路径
  console.log(meta) // 打印当前路由的元信息
  const tab: Tab = { // 创建一个新的选项卡对象
    path: path, // 设置选项卡路径
    title: meta.title as string // 设置选项卡标题
  }
  tabsStore.addTab(tab) // 调用选项卡仓库的方法添加选项卡
}

// 提交表单
const onSubmit = async () => {
}

// 返回列表
const goBack = () => {
  // 返回时保留缓存
  router.push('/category')
}


onMounted(() => {

})

// 组件销毁前保存数据
onBeforeUnmount(() => {

})
</script>

<template>
  <div class="form-container">
    <div class="form-header">
      <h3>{{ getTitle() }}</h3>
      <el-button @click="goBack">返回</el-button>
    </div>

    <el-form
      :model="form"
      label-width="auto"
      style="max-width: 600px"
      :disabled="getOperationType() === 'view'"
    >
      <el-form-item label="Activity name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <!-- 其他表单项... -->

      <el-form-item>
        <el-button
          v-if="getOperationType() !== 'view'"
          type="primary"
          @click="onSubmit"
        >
          {{ getOperationType() === 'create' ? '创建' : '保存' }}
        </el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  padding: 20px;

  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      margin: 0;
    }
  }
}
</style>
